<template>
  <a-drawer :width="800" :visible="visible" title="设置列表列" @close="cancel">
    <div class="add-btn">
      <a-button type="primary" @click="addFormLabel.visible = true">添加字段</a-button>
    </div>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :rowKey="record => record.labelName + record.field"
    >
      <template #handler="row">
        <a-row type="flex" justify="space-around">
          <a-button type="primary" @click="edit(row)">编辑</a-button>
          <a-button type="danger" @click="del(row)">删除</a-button>
        </a-row>
      </template>
      <template #isRequired="{ record }">{{ record.isRequired === 0 ? '是' : '否' }}</template>
    </a-table>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="reset">重置</a-button>
      <a-button type="primary" @click="cancel">返回</a-button>
    </div>
  </a-drawer>

  <!-- 表单标签添加操作 -->
  <form-detail
    v-if="addFormLabel.visible"
    v-model:visible="addFormLabel.visible"
    @add-form="confirmUpdate"
  ></form-detail>

  <!-- 表单标签编辑操作 -->
  <form-detail
    v-if="editFormLabel.visible"
    v-model:visible="editFormLabel.visible"
    v-model:form="editFormLabel.form"
    @edit-form="confirmUpdate"
  ></form-detail>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue';
import { Modal } from 'ant-design-vue';
import FormDetail from './FormDetail';
import _ from 'lodash-es';
const staic = {
  columns: [
    {
      title: '标签名',
      dataIndex: 'labelName',
      key: 'labelName',
    },
    {
      title: '字段',
      dataIndex: 'field',
      key: 'field',
    },
    {
      title: '组件选择',
      dataIndex: 'component',
      key: 'component',
    },
    {
      title: '是否必填',
      dataIndex: 'isRequired',
      key: 'isRequired',
      slots: {
        customRender: 'isRequired',
      },
    },
    {
      title: '占位字符',
      dataIndex: 'placeholder',
      key: 'placeholder',
    },
    {
      title: '操作',
      dataIndex: 'handler',
      slots: {
        customRender: 'handler',
      },
      width: '200px',
      key: 'handler',
    },
  ],
};
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: { FormDetail },
  emits: ['update:data', 'update:visible', 'edit-label'],
  setup(props, { emit }) {
    const { data } = toRefs(props);
    const state = reactive({
      dataSource: _.cloneDeep(data.value),
      addFormLabel: {
        visible: false,
      },
      editFormLabel: {
        form: {
          labelName: '',
          component: undefined,
          isRequired: 0,
          placeholder: '',
          field: '',
        },
        visible: false,
      },
    });
    watch(
      () => state.dataSource,
      key => {
        emit('update:data', _.cloneDeep(key));
      },
      { deep: true },
    );
    const del = row => {
      Modal.confirm({
        title: '确定删除？',
        onOk() {
          state.dataSource.splice(row.index, 1);
        },
      });
    };
    const edit = row => {
      const {
        index,
        record: { labelName, field, component, isRequired, placeholder },
      } = row;
      state.editFormLabel = {
        visible: true,
        form: {
          labelName,
          field,
          component,
          isRequired,
          placeholder,
          index,
        },
      };
    };
    const add = () => {
      state.addColumn.visible = true;
    };
    const cancel = () => {
      emit('update:visible', false);
    };
    const reset = () => {
      Modal.confirm({
        title: '确定后列表内所有数据都会被清空',
        content: '确定重置？',
        onOk() {
          state.dataSource = [];
        },
      });
    };
    const confirmUpdate = form => {
      const { labelName, field, component, isRequired, placeholder, index } = form;
      if (index !== undefined) {
        state.dataSource[index] = { labelName, field, component, isRequired, placeholder };
      } else {
        state.dataSource[state.dataSource.length] = {
          labelName,
          field,
          component,
          isRequired,
          placeholder,
        };
      }
    };
    return {
      ...toRefs(state),
      ...staic,
      cancel,
      del,
      edit,
      add,
      reset,
      confirmUpdate,
    };
  },
});
</script>
<style lang="less" scoped>
.add-btn {
  margin-bottom: 20px;
}
</style>
